<template>
  <div class="index">
  	<el-card class="box-card" shadow="always">
		  <el-carousel :interval="1000" type="card" height="200px">
			  <el-carousel-item v-for="product in cheapestProducts" style="display: flex; justify-content: center;">
			  	<a :href="'/mall/product/' + product.id">
            <el-image
              v-if="product.fromUrl"
              style="width: 200px; height: 200px;"
              :src="product.imgPath"
              fit="fill">
            </el-image>
            <el-image
              v-else
              style="width: 200px; height: 200px;"
              :src="product.imgPath && require('@/assets/img/product/' + product.imgPath)"
              fit="fill">
            </el-image>
			  	</a>
		  	</el-carousel-item>
			</el-carousel>
		</el-card>

		<el-divider></el-divider>

		<el-card class="box-card" shadow="always">
		  <div slot="header" class="clearfix title-wrapper">
		    <span class="list-title">今日特价</span>
		  </div>
		  <div class="list-wrapper">
		  	<div class="list-item" v-for="product in cheapestProducts">
		  		<a :href="'/mall/product/' + product.id">
            <el-image
              v-if="product.fromUrl"
              style="width: 200px; height: 200px;"
              :src="product.imgPath"
              fit="fill">
            </el-image>
            <el-image
              v-else
              style="width: 200px; height: 200px;"
              :src="product.imgPath && require('@/assets/img/product/' + product.imgPath)"
              fit="fill">
            </el-image>
		  		</a>
		    	<span style="overflow: hidden; width: 160px; line-height: 22px; height: 44px; font-size: 14px;" class="demonstration">{{ product.description }}</span>
		    	<span style="line-height: 22px; width: 160px; font-size: 16px; color: #d44; font-weight: 900;" class="demonstration">{{ product.price }}.00</span>
		  	</div>
		  </div>
		</el-card>

		<el-divider></el-divider>

		<el-card class="box-card" shadow="always">
		  <div slot="header" class="clearfix title-wrapper">
		    <span class="list-title">热卖推荐</span>
		    <div class="list-wrapper">
		  	<div class="list-item" v-for="product in hottestProducts">
		  		<a :href="'/mall/product/' + product.id">
            <el-image
              v-if="product.fromUrl"
              style="width: 200px; height: 200px;"
              :src="product.imgPath"
              fit="fill">
            </el-image>
            <el-image
              v-else
              style="width: 200px; height: 200px;"
              :src="product.imgPath && require('@/assets/img/product/' + product.imgPath)"
              fit="fill">
            </el-image>
		  		</a>
		    	<span style="overflow: hidden; width: 150px; line-height: 22px; height: 44px; font-size: 14px;" class="demonstration">{{ product.description }}</span>
		    	<span style="line-height: 22px; font-size: 16px; color: #d44; font-weight: 900;" class="demonstration">{{ product.price }}.00</span>
		  	</div>
		  </div>
		  </div>
		</el-card>
  </div>
</template>

<script>

export default {
  name: "Index",
  created() {
  	let _this = this;
  	_this.$axios.get("/product/cheapest").then((res) => {
  		const resData = res.data.data;
  		for (let idx in resData) {
        const resData = res.data.data;
  			const cheapestProduct = resData[idx];
        let imgPath = cheapestProduct.imgPath;
        let fromUrl = false;
        if (imgPath.slice(0, 4) === "http") {
          fromUrl = true;
        }
  			_this.cheapestProducts.push({
  				id: cheapestProduct.id,
  				name: cheapestProduct.name,
  				description: cheapestProduct.description,
  				price: cheapestProduct.price,
          imgPath: imgPath,
          fromUrl: fromUrl
        })
  		}
  	});
  	_this.$axios.get("/product/hottest").then((res) => {
  		const resData = res.data.data;
  		for (let idx in resData) {
  			const hottestProduct = resData[idx];
        let imgPath = hottestProduct.imgPath;
        let fromUrl = false;
        if (imgPath.slice(0, 4) === "http") {
          fromUrl = true;
        }
  			_this.hottestProducts.push({
  				id: hottestProduct.id,
  				name: hottestProduct.name,
  				description: hottestProduct.description,
  				price: hottestProduct.price,
          imgPath: imgPath,
          fromUrl: fromUrl
        })
  		}
  	});
  },
  data() {
  	return {
  		cheapestProducts: [],
  		hottestProducts: []
  	}
  }
}

</script>

<style scoped>
.index {
	width: 1242px;
}

.title-wrapper {
	display: flex; justify-content: center;
}

.list-title {
	font-weight: bold;
}

.list-wrapper {
	display: flex; 
	flex-wrap: wrap;
}

.list-item {
	margin: 20px; 
	display: flex; 
	flex-direction: column;
}

.el-image {
	width: 150px; 
	height: 150px; 
	margin: 5px;
}
</style>